<template>
	<view :style="{'padding-top':statusBarHeight + 'px'}">
		<view class="wrap">
			<view class="navigate-item" @click="gonavigate">
				<view class="navigate-wrap">
					<view class="navigate-info">
						<view class="form-item">
							<view class="title"><text class="form-item__title">查询人&nbsp&nbsp&nbsp :</text></view>
							<text>*泰</text>
						</view>
						<view class="form-item">
							<view class="title"><text class="form-item__title">查询编号：</text></view>
							<text>20230617095946</text>
						</view>
						<view class="form-item">
							<view class="title"><text class="form-item__title">查询时间：</text></view>
							<text>2023-06-17</text>
						</view>
						<view class="form-item">
							<view class="title"><text class="form-item__title">结果确认：</text></view>
							<text>结果已确认</text>
						</view>
						<view class="form-item">
							<view class="">
								<text class="form-item__title" style="margin-right: 14rpx;">结果条数：</text>
								<text>房屋登记信息、备案信息、交易信息、共计<text style="color:#E14548; padding: 0 6rpx">2</text>条</text>
							</view>
							<!-- <text>房屋登记信息、备案信息、交易信息、共计<text style="color:#E14548; padding: 0 6rpx">0</text>条</text> -->
						</view>
					</view>
				</view>
				<text class="navigate-icon uni-icon">&#xe470;</text>
			</view>
			<view class="navigate-item" @click="gonavigate">
				<view class="navigate-wrap">
					<view class="navigate-info">
						<view class="form-item">
							<view class="title"><text class="form-item__title">查询人 &nbsp&nbsp&nbsp :</text></view>
							<text>*泰</text>
						</view>
						<view class="form-item">
							<view class="title"><text class="form-item__title">查询编号：</text></view>
							<text>20230616152685</text>
						</view>
						<view class="form-item">
							<view class="title"><text class="form-item__title">查询时间：</text></view>
							<text>2023-06-16</text>
						</view>
						<view class="form-item">
							<view class="title"><text class="form-item__title">结果确认：</text></view>
							<text></text>
						</view>
						<view class="form-item">
							<view class="">
								<text class="form-item__title">结果条数：</text>
								<text>房屋登记信息、备案信息、交易信息、共计<text style="color:#E14548; padding: 0 6rpx">2</text>条</text>
							</view>
							<!-- <text>房屋登记信息、备案信息、交易信息、共计<text style="color:#E14548; padding: 0 6rpx">0</text>条</text> -->
						</view>
					</view>
				</view>
				<text class="navigate-icon uni-icon">&#xe470;</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				safeAreaInsets: 0,
			};
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			gonavigate() {
				uni.navigateTo({
					url: '/pages/searchDetail/index'
				})
			}
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
		}
	};
</script>

<style>
	.navigate-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		border-top-style: solid;
		border-top-color: #f0f0f0;
		border-top-width: 1px;
		padding: 12px;
		margin-bottom: 20rpx;
		box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.06);
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		position: relative;
	}

	.navigate-item:active {
		background-color: #f8f8f8;
	}

	.navigate-text {
		flex: 1;
		color: #000000;
		font-size: 14px;
		font-weight: normal;
	}

	.navigate-icon {
		margin-left: 15px;
		color: #999999;
		font-size: 14px;
		font-weight: normal;
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
	}

	.navigate-wrap {
		display: flex;
		align-items: center;
		position: relative;
	}

	.navigate-logo {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.navigate-info {
		display: flex;
		flex-direction: column;
	}

	.navigate-title {
		font-size: 36rpx;
		font-weight: 800;
		margin-bottom: 20rpx;

	}

	.navigate-subTitle {
		font-size: 24rpx;
		color: #A0A0A0;
	}

	.page-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 40rpx 0 20rpx 0;
	}

	.page-title .navigate-title {
		margin-bottom: 0 !important;
	}

	.saoyisao {
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.saoyisaoIcon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
	}

	.page-bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #CFCFCF;
		margin-top: 40rpx;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		background-color: #ffffff;
		font-size: 30rpx;
		color: #6B6B6B;
		margin: 10rpx 0;
	}

	.form-item .title {
		width: 160rpx;
		/* margin-right: 6rpx; */
		word-break: keep-all;
	}
</style>